<script setup>
import { ref } from 'vue'
import {
  User,
  UserFilled,
  House,
  Money,
  OfficeBuilding,
  Notification,
  MapLocation,
  Expand
} from '@element-plus/icons-vue'

const isCollapse = ref(true)

const toggleMenu=()=>{
  isCollapse.value= !isCollapse.value
}
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}


</script>
<script>

export default {
  data() {
    return {
      teamRole:''
    };
  },
  mounted() {
    this.teamRole = JSON.parse(sessionStorage.getItem('loginUser')).teamRole;
  }
};
</script>

<template>
<!-- 导航栏-->
  <el-menu
      default-active="/freshman/admin/index"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      router="true"
  >
    <el-menu-item  @click="toggleMenu">
      <el-icon><Expand /></el-icon>
    </el-menu-item>
    <el-menu-item index="/home/amusement">
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/watchmember">
      <el-icon><UserFilled /></el-icon>
      <template #title>社团成员</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/signmember"   v-if="teamRole==='社长'">
      <el-icon><User /></el-icon>
      <template #title>报名审核</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/watchnotice"   v-if="teamRole==='成员'">
      <el-icon><Notification /></el-icon>
      <template #title>查看公告</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/managenotice"   v-if="teamRole==='社长'">
      <el-icon><OfficeBuilding /></el-icon>
      <template #title>管理公告</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/judgenotice">
      <el-icon><OfficeBuilding /></el-icon>
      <template #title>超管审核公告</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/activecheck" v-if="teamRole==='成员'">
      <el-icon><OfficeBuilding /></el-icon>
      <template #title>活动签到</template>
    </el-menu-item>
    <el-menu-item index="/home/amusement/clubmember/activecheckresult" v-if="teamRole==='社长'">
      <el-icon><OfficeBuilding /></el-icon>
      <template #title>活动参与情况</template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu-item{
  font-size: 18px;
}
.el-menu-item.is-active{
  font-size: 18px;
}
</style>